<script lang="ts">
    import { onMount } from 'svelte';
    import Header from '../../components/common/Header.svelte';

    let currentTime = 0;
    let translations = [
        { time: '00:00:00.00', text: 'Credit card management is key to maintaining a good', translation: '信用卡管理是维持良好信用记录的关键' },
        { time: '00:00:05.00', text: 'debts', translation: '债务' },
        { time: '00:00:08.00', text: 'Using credit card wisely can help us build credit and', translation: '明智地使用信用卡可以帮助我们建立信用并' },
        { time: '00:00:11.00', text: 'effective budgeting, saving', translation: '有效的预算，储蓄' }
    ];

    onMount(() => {
        // 初始化视频播放器
    });

    function handleTimeUpdate(event: any) {
        currentTime = event.target.currentTime;
    }
</script>

<main class="bg-gray-100 min-h-screen">
    <Header />
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧视频播放区域 -->
            <div class="lg:w-2/3">
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <video
                        class="w-full aspect-video"
                        controls
                        on:timeupdate={handleTimeUpdate}
                        src="/path/to/your/video.mp4"
                    >
                        <track kind="captions" />
                    </video>
                </div>
            </div>

            <!-- 右侧翻译文本列表 -->
            <div class="lg:w-1/3">
                <div class="bg-white rounded-lg shadow-sm p-4 h-[600px] overflow-y-auto">
                    <h2 class="text-lg font-semibold mb-4">翻译文本</h2>
                    <div class="space-y-4">
                        {#each translations as item}
                            <div class="border-b pb-4">
                                <div class="text-sm text-gray-500 mb-1">{item.time}</div>
                                <div class="text-gray-700">{item.text}</div>
                                <div class="text-green-600 mt-1">{item.translation}</div>
                            </div>
                        {/each}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<style>
    .aspect-video {
        aspect-ratio: 16 / 9;
    }
</style>